<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件循环EventLoop</title>
  </head>
  <body>
    <button id="btn">点击</button>
    <script>
      // 1.generator
      /*   function* genFn(x) {
          console.log(x);
          let y = 2 * (yield x + 1);
          console.log(y);
          let z = yield y / 3;
          console.log(z);
          return x + y + z;
        }

        let gen = genFn(5);
        gen.next(); // 5
        gen.next(12); // 24
        let result = gen.next(13); // 13
        console.log(result.value); // 5+24+13=42 */

      /* for (const g of gen) {
        console.log("g-", g);
      } */

      // 2.async
      /* async function fn() {
        console.log(1);
        let result = await 100;
        console.log(result);
        console.log(2);
      }

      console.log(0);
      fn();
      console.log(3); */

      // 3.dom
      /* setTimeout(function fn1() {
        console.log("setTimeout1");
        Promise.resolve().then(r => {
          console.log("promise1");
        });
        // 动画渲染
        requestAnimationFrame(function fn3() {
          console.log("RAF1");
        });
      });

      setTimeout(function fn2() {
        console.log("setTimeout2");
        Promise.resolve().then(r => {
          console.log("promise2");
        });
        // 动画渲染
        requestAnimationFrame(function fn4() {
          console.log("RAF2");
        });
      }); */

      // 4.document
      const btn = document.getElementById("btn");

      btn.addEventListener("click", () => {
        setTimeout(() => console.log("setTimeout1"));
        console.log("task1");
        Promise.resolve().then(() => console.log("micro task1"));
      });

      btn.addEventListener("click", () => {
        setTimeout(() => console.log("setTimeout2"));
        console.log("task2");
        Promise.resolve().then(() => console.log("micro task2"));
      });
    </script>
  </body>
</html>
